<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mescroll.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/pages/discover.css" />
	</head>

	<body>
		<div class="loading-warpper" id="loading">
			<div class="loading">
				<div class="item1"></div>
				<div class="item2"></div>
			</div>
		</div>
		<div id="app" style="height: 100%;">
			<div id="mescroll" class="mescroll">
				<div class="mudule-class">
					<div class="list">
						<div class="list-item" v-for="item in list" @click="detailClick(item)">
							<div class="item-warpper">
								<div class="item-image">
									<img :imgurl="item.path" src="../../images/jiazai.gif">
								</div>
								<div class="item-desc">
									<span class="title" v-text="item.disName"></span>
									<div class="flex-sal">
										<img class="icon" src="../../images/discover/huo.png">
										<span class="distance font-c-ad">{{item.distance | toFixed}}</span>
									</div>
									<div class="item-map">
										<img src="../../images/map.png">
										<span class="font-12 font-c-ad">{{item.disDetails}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<script src="../../js/Width.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mescroll.min.js"></script>
		<script src="../../js/vue.js"></script>
		<script src="../../js/Util.js"></script>
		<script src="../../js/getDistance.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true, //启用右滑关闭功能
			})
			var mescroll;
			mui.plusReady(function() {
				if (!mui.os.android) {
					FastClick.attach(document.body);
				}
				var ws = plus.webview.currentWebview();
				var text = ws.name;
				mescroll = new MeScroll("mescroll", {
					down: {
						auto: false,
						callback: downCallback //下拉刷新的回调
					},
					up: {
						auto: true,
						callback: upCallback, // 上拉加载更多的回调
						page: {
							text: text,
							num: 0,
							size: 10
						},
						lazyLoad: {
							use: true,
							attr: 'imgurl',
							showClass: 'mescroll-lazy-in',
							delay: 500,
							offset: 200
						},
						empty: {
							warpId: "mescroll",
							icon: "../../images/zanwu.png",
							tip: "您搜索的商家暂未找到~",
							btntext: "",
							btnClick: null,
							supportTap: false
						},
						htmlNodata: '<p class="upwarp-nodata">-- 没有更多数据了 --</p>',
					}
				});

			})


			var app = new Vue({
				el: "#app",
				data: {
					type: '',
					title: '',
					list: [],
				},
				filters: {
					toFixed: function(value) {
						var number = Number(value.toString().match(/^\d+(?:\.\d{0,2})?/));
						return number > 1 ? number + 'km' : number * 1000 + 'm'
					}
				},
				methods: {
					detailClick: function(item) {
						mui.openWindow({
							url: 'detail.html',
							id: 'detail.html',
							styles: { // 窗口参数 参考5+规范中的WebviewStyle,也就是说WebviewStyle下的参数都可以在此设置
								titleNView: { // 窗口的标题栏控件
									titleText: item.disName, // 标题栏文字,当不设置此属性时，默认加载当前页面的标题，并自动更新页面的标题         // 字体颜色,颜色值格式为"#RRGGBB",默认值为"#000000"
									type: 'transparent',
									titleSize: "17px", // 字体大小,默认17px
									backgroundColor: "#ffffff", // 控件背景颜色,颜色值格式为"#RRGGBB",默认值为"#F7F7F7"
									autoBackButton: true
								}
							},
							waiting: {
								autoShow: false
							},
							extras: {
								detailID: item.disID,
							},
						})
					}
				},
			})


			function downCallback() {
				app.list = []
				mescroll.resetUpScroll();
			}

			function upCallback(page, mescroll) { // 调用发现类型列表方法.
				plus.geolocation.getCurrentPosition(function(p) { // 获取自身定位方法 由于这个方法是异步加载的  所以请求只能放在这里面去执行,很操蛋
					var latitude = p.coords.latitude;
					var longitude = p.coords.longitude;
					if (mui.os.ios) {
						var data = wgs84togcj02(longitude, latitude)
						latitude = data[1];
						longitude = data[0];
					}
					latitude = Number(latitude.toString().match(/^\d+(?:\.\d{0,6})?/));
					longitude = Number(longitude.toString().match(/^\d+(?:\.\d{0,6})?/));
					mui.post(Util.HTTP + 'api/Discovery/GetDiscoverySearch', {
						disName: page.text,
						disLng: longitude,
						disLat: latitude,
						page: page.num,
						number: page.size
					}, function(res) {
						if (res.code == 1001) {
							console.log(res.data.length)
							res.data.forEach(function(item, index) {
								item.distance = getDistance(item.disLng, item.disLat, longitude, latitude)
							})
							mescroll.endSuccess(res.data.length);
							app.list = app.list.concat(res.data)
							document.getElementById('loading').style.display = 'none'
						} else {
							mui.toast(res.message)
						}
					})
				}, function(e) {
					alert('Geolocation error: ' + e.message);
				});
			}
		</script>
	</body>

</html>
